<template>
  <div class="flex flex-row items-center">
    <a-input-number
      v-model:value="obtainLimitNum"
      class="!w-56 !mr-4 cursor-pointer"
      :min="1"
      :max="99999"
      :disabled="isObtainLimit === 0"
      placeholder="请输入数量"
    />
    <a-radio-group v-model:value="isObtainLimit" name="obtainLimitGroup">
      <a-radio :value="0">不限数量</a-radio>
      <a-radio :value="1">限定数量</a-radio>
    </a-radio-group>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { AcitivityDefItem } from "/@/api/main/marketing/models";
const props = defineProps<{
  value: AcitivityDefItem["_obtainLimitNum"];
}>();
const emits = defineEmits(["change"]);

const isObtainLimit = ref<0 | 1 | boolean>(1);
const obtainLimitNum = ref<number>();

watch(
  () => props.value,
  (val) => {
    if (val) {
      isObtainLimit.value = val.isObtainLimit ? 1 : 0;
      obtainLimitNum.value = val.obtainLimitNum;
    } else {
      obtainLimitNum.value = undefined;
    }
  },
  {
    immediate: true,
  }
);

watch([isObtainLimit, obtainLimitNum], ([isObtainLimit, num]) => {
  if (num || !isObtainLimit) {
    emits("change", {
      isObtainLimit: isObtainLimit === 1,
      obtainLimitNum: num,
    });
  } else {
    emits("change", null);
  }
});
</script>
